<!--**
  *@info 未完成订单组件
  *@author: thinkmix
  *@date 2019-02-13
* *-->
<template>
  <transition appear name="bounceInDown">
    <section class="m-order-info bgGrey" v-if="show_">
      <div class="bgWhite m-row-box">
        <div class="f-tag-bg f-line-btm yellow">当前有未完成订单，需要先完成订单再进行其他操作</div>
        <ul class="m-row-ul">
          <li class="f-flex f-line-btm">
            <div class="rowspan">订单号</div>
            <div class="auto f-tar">{{ orderInfo.sysOrderId || '--' }}</div>
          </li>
          <li class="f-flex f-line-btm">
            <div class="rowspan">号码</div>
            <div class="auto f-tar">{{ phoneFormat(orderInfo.phoneNumber) }}</div>
          </li>
          <li class="f-flex f-line-btm">
            <div class="rowspan">归属地</div>
            <div class="auto f-tar">{{ orderInfo.cityName || '--' }}</div>
          </li>
          <li class="f-flex f-line-btm">
            <div class="rowspan">首月服务费</div>
            <div class="auto f-tar">
              <span
                class="f-tdl-old"
                v-if="showInitialMoney"
              >￥{{ numberFormat(orderInfo.cardMoney) }}</span>
              <span>￥{{ numberFormat(orderInfo.actualCardMoney) }}</span>
            </div>
          </li>
          <li class="f-flex f-line-btm">
            <div class="rowspan">预存话费</div>
            <div class="auto f-tar">￥{{ numberFormat(orderInfo.actualprestoreMoney) }}</div>
          </li>
          <li class="f-flex f-line-btm">
            <div class="rowspan">价格</div>
            <div class="auto f-tar red">￥{{ numberFormat(orderInfo.actualMoney) }}</div>
          </li>
          <li class="f-flex f-line-btm">
            <div class="rowspan">状态</div>
            <div class="auto f-tar" v-html="orderStatusDesc"></div>
          </li>
          <!-- <li class="f-flex">
            <div class="rowspan">结束时间</div>
            <div class="auto f-tar">
              <b class="f-fs-12">{{ validTime }}</b>
            </div>
          </li>-->
        </ul>
      </div>
      <div class="f-btn-group f-flex mid">
        <div class="btn btnDefault" @click="abandonHandle">放弃</div>
        <div class="btn bgTheme" @click="continueHandle">继续完成该订单</div>
      </div>
    </section>
  </transition>
</template>
<script>
import { secondsFormat } from '@/utils/utils';
import { getOrderGetAndAbandonUrl, setOrderStore, setOrderStatus, orderInit } from '@/utils/orderUtils';

export default {
  name: 'orderNotFinished',
  props: {
    value: {
      default: false,
      type: Boolean
    },
    orderInfo: {
      default () {
        return {}
      },
      type: Object
    },
    userInfo: {
      default () {
        return {}
      },
      type: Object
    },
    // 业务类型
    businessType: {
      default: 'CARD', // CARD开空卡,OPEN_CHENG开成卡,OPEN_WHITE开白卡,MAKE_CHENG制成卡,MAKE_WHITE制白卡
      type: String
    },
  },
  data () {
    return {
      show_: false,
      timer: null,
      validTime: '',
      requestUrl: {
        get: '',
        abandon: ''
      },
      jump: {
        url: '',
        title: ''
      },
      isDeviceSdk: false, // 是否是设备SDK
      orderStatusDesc: '', // 订单描述
    }
  },
  computed: {
    showInitialMoney () { // 是否显示原首月服务费
      return this.orderInfo.actualCardMoney != this.orderInfo.cardMoney;
    },
  },
  watch: {
    'value' () {
      this.show_ = this.value;
    },
    'show_' () {
      this.$emit('input', this.show_);
    },
    'orderInfo' () {
      let { statusDesc } = setOrderStatus(this.businessType, this.orderInfo);
      this.orderStatusDesc = statusDesc;
    }
  },
  created () {
    this.isDeviceSdk = this.$parent.isDeviceSdk;
    this.show_ = this.value;
    this.countDown();
    this.requestUrl = getOrderGetAndAbandonUrl(this.businessType);
  },
  methods: {
    continueHandle () { // 继续完成订单
      const vm = this;

      vm.AJAX(this.requestUrl.get, { userInfo: vm.userInfo }, function (res) {
        if (res && res.data) {
          let orderInfo = res.data;
          // 订单初始化
          orderInit(vm);
          // 设置订单缓存
          setOrderStore(vm, vm.businessType, orderInfo);
          // 设置订单状态
          let { url, title } = setOrderStatus(vm.businessType, orderInfo);
          vm.jump = {
            url,
            title
          }

          if (vm.businessType === 'CARD') {
            vm.cardJumpDeal(orderInfo);
          } if (vm.businessType === 'OPEN_CHENG') {
            vm.openChengJumpDeal(orderInfo);
          } if (vm.businessType === 'OPEN_WHITE') {
            vm.openWhiteJumpDeal(orderInfo);
          } else if (vm.businessType === 'MAKE_CHENG') {
            vm.makeChengJumpDeal(orderInfo);
          } else if (vm.businessType === 'MAKE_WHITE') {
            vm.makeWhiteJumpDeal(orderInfo);
          }

        } else {
          vm.show_ = false;
        }
      });
    },
    // 开空卡跳转处理
    cardJumpDeal (orderInfo) {
      if (this.isDeviceSdk) {
        this.deviceSdkContinueJump();
      } else {
        Jsborya.pageJump({
          url: '',
          stepCode: orderInfo.orderStatusCode,
          depiction: '开卡',
          data: orderInfo
        });
      }
    },
    // 开成卡跳转
    openChengJumpDeal (orderInfo) {
      if (this.isDeviceSdk) {
        this.deviceSdkContinueJump();
      } else {
        Jsborya.pageJump({
          url: '',
          stepCode: orderInfo.orderStatusCode,
          depiction: orderInfo.bizType === '7' ? '开远盟成卡' : '开成卡',
          data: orderInfo
        });
      }
    },
    // 开白卡跳转
    openWhiteJumpDeal (orderInfo) {
      if (this.isDeviceSdk) {
        this.deviceSdkContinueJump();
      } else {
        Jsborya.pageJump({
          url: '',
          stepCode: orderInfo.orderStatusCode,
          depiction: '开白卡',
          data: orderInfo
        });
      }
    },
    // 制成卡跳转
    makeChengJumpDeal (orderInfo) {
      let depiction = '';

      orderInfo.makeType = '1';
      if (orderInfo.orderType == 2) {
        depiction = '专营号制成卡'
      } else if (orderInfo.orderType == 3) { // 远盟号制成卡,这个判断目前用不到
        depiction = '远盟号制成卡'
      } else { // 0大众号 & 1预存号
        depiction = '大众号制成卡'
      }

      if (this.isDeviceSdk) {
        this.deviceSdkContinueJump();
      } else {
        Jsborya.pageJump({
          url: '',
          stepCode: '2007',
          depiction,
          data: orderInfo
        });
      }
    },
    // 制白卡跳转
    makeWhiteJumpDeal (orderInfo) {
      orderInfo.makeType = '2';

      if (this.isDeviceSdk) {
        this.deviceSdkContinueJump();
      } else {
        Jsborya.pageJump({
          url: '',
          stepCode: '2007',
          depiction: orderInfo.orderType == 2 ? '专营号制白卡' : '大众号制白卡',
          data: orderInfo
        });
      }
    },
    deviceSdkContinueJump () {
      if (this.jump.url) {
        Jsborya.pageJump({
          url: this.jump.url,
          stepCode: '999',
          depiction: this.jump.title,
        });
      }
    },
    abandonHandle () { // 放弃订单
      const vm = this;

      layer.open({
        title: '提示',
        content: '您要放弃未完成的订单的后续操作么？',
        btn: ['放弃', '取消'],
        yes: function () {
          let json = {
            params: {
              sysOrderId: vm.orderInfo.sysOrderId || '',
            },
            userInfo: vm.userInfo
          };
          let url = vm.requestUrl.abandon;

          if (vm.orderInfo.bizType === '7') {
            url = '/eas/w/ymactive/cancel';
          }

          vm.AJAX(url, json, function (data) {
            vm.show_ = false;
            layer.open({
              title: '操作成功',
              content: '订单已取消，若已支付，支付货款将退回至您的账户',
              btn: ['确定'],
            });
          });
        }
      });
    },
    countDown () {//倒计时
      const vm = this;

      var time = parseInt(vm.orderInfo.validTime);
      clearInterval(vm.timer);

      vm.timer = setInterval(function () {
        time--;
        if (!time) {
          vm.validTime = '00:00';
          clearInterval(vm.Timer);
        } else {
          vm.validTime = secondsFormat(time);
        }
      }, 1000);
    }
  }
}
</script>

<style lang="scss" scoped>
.m-order-info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
}
.f-btn-group {
  margin: 0 0.1rem;
  > div:first-child {
    margin-right: 0.2rem;
  }
  > .btn {
    width: 100%;
  }
}

@keyframes bounceInDown {
  0%,
  100%,
  60%,
  75%,
  90% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  100% {
    transform: none;
  }
}
.bounceInDown-enter-active {
  animation-name: bounceInDown;
  animation-duration: 1s;
  animation-fill-mode: both;
  backface-visibility: visible;
}
</style>
